import Taro from '@tarojs/taro'
import { View, Input, Picker, Button } from '@tarojs/components'

import ListItem from '../../components/listItem'
import { addPartner } from '../../api/partner'
import { showToast, isPhone, isName, setUpdatePage } from '../../utils'

import './index.less'

class AddPartner extends Taro.Component {
  config = {
    navigationBarTitleText: '新增'
  }

  state = {
    selectors: {
      gender: ['请选择', '男', '女'],
      // partner: ['请选择', '城市合伙人', '高级合伙人', '普通合伙人'],
      partner: ['请选择', '普通合伙人'],
      genderKeys: ['', 1, 2],
      // partnerKeys: ['', 2, 3, 4]
      partnerKeys: ['', 4]
    },
    form: {
      name: '',
      sex: '请选择',
      mobile: '',
      levelId: '请选择'
    }
  }

  onPickerChange = (key, name, ev) => {
    this.setState({
      form: {
        ...this.state.form,
        [key]: this.state.selectors[name][ev.detail.value]
      }
    })
  }

  formatForm = () => {
    const newForm = {}
    const { selectors, form } = this.state

    for (let key in form) {
      if (key === 'sex') {
        const index = selectors.gender.indexOf(this.state.form[key])
        newForm[key] = selectors.genderKeys[index]
      } else if (key === 'levelId') {
        const index = selectors.partner.indexOf(this.state.form[key])
        newForm[key] = selectors.partnerKeys[index]
      } else {
        newForm[key] = form[key].trim()
      }
    }

    return newForm
  }

  addPartner = async () => {
    const form = this.formatForm()
    
    for (let key in form) {
      if (form[key] === '') {
        switch(key) {
          case 'name':
            showToast('请填写姓名')
            return
          case 'sex':
            showToast('请选择性别')
            return
          case 'mobile':
            showToast('请填写手机号')
            return
          case 'levelId':
            showToast('请选择合伙人')
            return
        }
      }
    }

    if (!isName(form.name)) {
      showToast('姓名格式有误')
      return
    }

    if (!isPhone(form.mobile)) {
      showToast('手机号有误')
      return
    }

    Taro.showLoading()

    const res = await addPartner(form)

    Taro.hideLoading()

    if (res.code === 1) {
      showToast('新增成功！')
      
      setUpdatePage(2)
      Taro.navigateBack()
    } else {
      showToast(res.message)
    }
  }

  handleInput = (key, ev) => {
    this.setState({
      form: {
        ...this.state.form,
        [key]: ev.target.value
      }
    })
  }

  render() {
    const { form, selectors } = this.state

    return (
      <View className="page">
        <View className="partner-list">
          <ListItem label="姓名" required border>
            <Input
              value={ form.name }
              type="text"
              placeholder="请填写"
              placeholderClass="placeholder"
              onInput={ this.handleInput.bind(this, 'name') }
            />
          </ListItem>
          <ListItem label="性别" required border>
            <Picker
              mode="selector"
              range={ selectors.gender }
              onChange={ this.onPickerChange.bind(this, 'sex', 'gender') }
            >
              { form.sex }
            </Picker>
          </ListItem>
          <ListItem label="手机号" required border>
            <Input
              value={ form.mobile }
              type="number"
              placeholder="请填写"
              placeholderClass="placeholder"
              onInput={ this.handleInput.bind(this, 'mobile') }
            />
          </ListItem>
          <ListItem label="合伙人级别" required>
            <Picker
              mode="selector"
              range={ selectors.partner }
              onChange={ this.onPickerChange.bind(this, 'levelId', 'partner') }
            >
              { form.levelId }
            </Picker>
          </ListItem>
          <Button hover-class="btn-active" className="add-btn" onClick={ this.addPartner }>确定</Button>
        </View>
      </View>
    )
  }
}

export default AddPartner